<template>
  <div>
    <v-data-table
      :value="selected"
      :headers="headers"
      :items="projects"
      :search="search"
      :loading="loading"
      loading-text="Loading... Please wait"
      item-key="id"
      show-select
      @input="update"
    >
      <template v-slot:top>
        <v-text-field
          v-model="search"
          prepend-inner-icon="search"
          label="Search"
          single-line
          hide-details
          filled
        />
      </template>
      <template v-slot:item.name="{ item }">
        <nuxt-link :to="`/projects/${item.id}`">
          <span>{{ item.name }}</span>
        </nuxt-link>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data() {
    return {
      search: '',
      headers: [
        {
          text: 'Name',
          align: 'left',
          value: 'name'
        },
        {
          text: 'Description',
          value: 'description'
        },
        {
          text: 'Type',
          value: 'project_type'
        }
      ]
    }
  },
  computed: {
    ...mapState('projects', ['projects', 'selected', 'loading']),
    ...mapState('labels', ['complateButton', 'topLevelLabelList', 'treeData'])
  },

  async created() {
    await this.getProjectList()
    await this.getComplateButton()
    await this.getTopLevelLabelList()
    await this.getTreeData()
    // await this.
    localStorage.setItem('complateButton', JSON.stringify(this.complateButton))
    localStorage.setItem(
      'topLevelLabelList',
      JSON.stringify(this.topLevelLabelList)
    )
    localStorage.setItem('treeData', JSON.stringify(this.treeData))
  },
  methods: {
    ...mapActions('projects', ['getProjectList']),
    ...mapMutations('projects', ['updateSelected']),
    ...mapActions('labels', ['getComplateButton', 'getTopLevelLabelList', 'getTreeData']),
    update(selected) {
      this.updateSelected(selected)
    }
  }
}
</script>
